<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. It's a separate element as animating opacity is faster than rgba(). -->

    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->

    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">

            <div class="pswp__item"></div>

            <div class="pswp__item"></div>

            <div class="pswp__item"></div>

        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<!--分享和全屏
                <button class="pswp__button pswp__button&#45;&#45;share" title="Share"></button>

                <button class="pswp__button pswp__button&#45;&#45;fs" title="Toggle fullscreen"></button>
-->

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">

                    <div class="pswp__preloader__icn">

                        <div class="pswp__preloader__cut">

                            <div class="pswp__preloader__donut"></div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">

                <div class="pswp__share-tooltip"></div>

            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>

            <div class="pswp__caption">

                <div class="pswp__caption__center"></div>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript">

    var openPhotoSwipe = function(no,id)
    {
        var pswpElement = document.querySelectorAll('.pswp')[0];

        var images = $('.attr-img-ul').find('li img');

        // build items array
        var items = [];

        var aDiv = document.getElementById(id);

        var getItems = function()
        {
            if (aDiv.hasChildNodes())
            {
                $("#"+id).find('img').each(function()
                {
                    var item = {
                        src:$(this).attr('src'),
                        w: $(this).context.naturalWidth,
                        h: $(this).context.naturalHeight
                    };

                    items.push(item);
                });
            }
        };

        getItems();

        // define options (if needed)
        var options = {
            // history & focus options are disabled on CodePen
            history: false,
            focus: false,
            index: no,
            showAnimationDuration: 0,
            hideAnimationDuration: 0
        };

        var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);

        gallery.init();
    };

</script>